<template>
  <div class="goods-list">
    <ul>
      <li class='good-item' v-for="item in goodsList" :key="item.goods_id">
        <div class="item-left">
          <img :src="item.hd_thumb_url" alt="">
        </div>
        <div class="item-right">
          <div class="title">{{item.goods_name}}</div>
          <div class="sell-info">
            <div class="price-count">
              <span class="price">
                <i>￥</i>
                <b>{{item.normal_price / 100}}</b>
              </span>
              <span class="sales-tip">{{item.sales_tip}}</span>
            </div>
            <div class="bubbles">
              <span v-for="user in item.bubble" :key="user.group_order_id">
                <img :src="user.avatar" alt="">
              </span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'hotGoodsLIst',
    mounted () {
      this._initData()
    },
    data () {
      return {
        goodsList: []
      }
    },
    methods: {
      _initData () {
        axios.get('/static/mock/hotGoodList.json')
          .then((res) => {
            // console.log(res.data.goods_list)
            this.goodsList = res.data.message.goods_list
            // this.goodsList = res.data.goods_list
          })
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../../../assets/style/mixins.styl'
  .goods-list
    width 100%
    margin-top: 20px
    background: #fff
    overflow hidden
    .good-item
      width: 100%
      display flex
      box-sizing border-box
      padding 0 5px

      .item-left
        flex 1
        box-sizing border-box
        padding 5px
        overflow hidden
        img
          width 100%
          border-radius 2px


      .item-right
        flex 1
        display flex
        flex-direction column
        justify-content space-between
        border-bottom-1px(rgba(0,0,0,0.1))
        padding 5px
        box-sizing border-box

        .title
          font-size 14px
          line-height 20px
          height 40px
          overflow hidden
          color #333

        .sell-info
          width: 100%
          display flex
          justify-content space-between
          align-items center
          .price-count
            display flex
            align-items center
            .sales-tip
              font-size 10px
              color #ccc
              margin-left 2px
            .price
              color $pddRed
              display flex
              align-items flex-end

              i
                font-size 8px
              b
                font-size 18px
          .bubbles
            span
              display inline-block
              width: 22px
              height: 22px
              border-radius 50%
              overflow hidden
              margin-left -6px
              &:first-child
                margin-left: 0
</style>
